var vm = new Vue({
		el:'#wrapper',
		data:{
			menuList:{},
            setting:[],
		},
		methods: {
			getMenuList: function (event) {
                $.getJSON($path+"sys/menu/user?_"+$.now(), function(r){
                    vm.menuList = r.menuList;
                    window.permissions = r.permissions;
                    window.localStorage.menu = JSON.stringify(r.menuList);
                    window.localStorage.permission = JSON.stringify(r.permissions);
                });
			},
			logout: function(){
	            window.localStorage.Authorization = "";
	            parent.location.href = 'login.html';
	        },
            change: function(){
                if(window.localStorage){
                    window.localStorage.setting = JSON.stringify(vm.setting);
                }
                initIframe();

            }
		},
		updated:function(){
            $('#sidebarnav').metisMenu();

		},
        mounted:function() {

        }
});
$(document).ready(function () {
    if(window.localStorage && window.localStorage.menu!=null){
        vm.menuList = JSON.parse(window.localStorage.menu);
        window.permissions = JSON.parse(window.localStorage.permission);
    }else{
        vm.getMenuList();
    }
    if(window.localStorage){
        vm.setting = JSON.parse(window.localStorage.setting);
    }
});


/**
 * 菜单tab
 */
$(document).ready(function () {

    //查看左侧隐藏的选项卡
    function scrollTabLeft() {
        var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
        // 可视区域非tab宽度
        var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
        //可视区域tab宽度
        var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
        //实际滚动宽度
        var scrollVal = 0;
        if ($(".page-tabs-content").width() < visibleWidth) {
            return false;
        } else {
            var tabElement = $(".menuTab:first");
            var offsetVal = 0;
            while ((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) { //找到离当前tab最近的元素
                offsetVal += $(tabElement).outerWidth(true);
                tabElement = $(tabElement).next();
            }
            offsetVal = 0;
            if (calSumWidth($(tabElement).prevAll()) > visibleWidth) {
                while ((offsetVal + $(tabElement).outerWidth(true)) < (visibleWidth) && tabElement.length > 0) {
                    offsetVal += $(tabElement).outerWidth(true);
                    tabElement = $(tabElement).prev();
                }
                scrollVal = calSumWidth($(tabElement).prevAll());
            }
        }
        $('.page-tabs-content').animate({
            marginLeft: 0 - scrollVal + 'px'
        },
        "fast");
    }

    //查看右侧隐藏的选项卡
    function scrollTabRight() {
        var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
        // 可视区域非tab宽度
        var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
        //可视区域tab宽度
        var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
        //实际滚动宽度
        var scrollVal = 0;
        if ($(".page-tabs-content").width() < visibleWidth) {
            return false;
        } else {
            var tabElement = $(".menuTab:first");
            var offsetVal = 0;
            while ((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) { //找到离当前tab最近的元素
                offsetVal += $(tabElement).outerWidth(true);
                tabElement = $(tabElement).next();
            }
            offsetVal = 0;
            while ((offsetVal + $(tabElement).outerWidth(true)) < (visibleWidth) && tabElement.length > 0) {
                offsetVal += $(tabElement).outerWidth(true);
                tabElement = $(tabElement).next();
            }
            scrollVal = calSumWidth($(tabElement).prevAll());
            if (scrollVal > 0) {
                $('.page-tabs-content').animate({
                    marginLeft: 0 - scrollVal + 'px'
                },
                "fast");
            }
        }
    }

    //通过遍历给菜单项加上data-index属性
    $(".menuItem").each(function(index) {
        if (!$(this).attr('data-index')) {
            $(this).attr('data-index', index);
        }
    });

    function menuItem() {
        // 获取标识数据
        var dataUrl = $(this).attr('href'),
        dataIndex = $(this).data('index'),
        menuName = $.trim($(this).text()),
        flag = true;
        if (dataUrl == undefined || $.trim(dataUrl).length == 0) return false;

        // 选项卡菜单已存在
        $('.menuTab').each(function() {
            if ($(this).data('id') == dataUrl) {
                if (!$(this).hasClass('active')) {
                    $(this).addClass('active').siblings('.menuTab').removeClass('active');
                    scrollToTab(this);
                    // 显示tab对应的内容区
                    $('.mainContent .my_iframe').each(function() {
                        if ($(this).data('id') == dataUrl) {
                            $(this).show().siblings('.my_iframe').hide();
                            return false;
                        }
                    });
                }
                flag = false;
                return false;
            }
        });
        // 选项卡菜单不存在
        if (flag) {
        	
            var str = '<a href="javascript:;" class="active menuTab waves-effect" data-id="' + dataUrl + '" >' + menuName + ' <i class="fa fa-times-circle"></i></a>';
            $('.menuTab').removeClass('active');

            // 添加选项卡对应的iframe
            var str1 = '<iframe class="my_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
            $('.mainContent').find('iframe.my_iframe').hide().parents('.mainContent').append(str1);
           // $.modal.loading("数据加载中，请稍后...");
            /*$('.mainContent iframe:visible').load(function () {
            	$.modal.closeLoading();
            });*/
            
            // 添加选项卡
            $('.menuTabs .page-tabs-content').append(str);
            scrollToTab($('.menuTab.active'));
        }else{
            var target = $('.my_iframe[data-id="' + dataUrl + '"]');
            var url = target.attr('src');
            target.attr('src', dataUrl).ready();
        }
        return false;
    }

    /* $('.menuItem').on('click', menuItem);*/   
    $(document).on('click','.menuItem',menuItem);

    // 关闭选项卡菜单
    function closeTab() {
        var closeTabId = $(this).parents('.menuTab').data('id');
        var currentWidth = $(this).parents('.menuTab').width();
        // 当前元素处于活动状态
        if ($(this).parents('.menuTab').hasClass('active')) {
            // 当前元素后面有同辈元素，使后面的一个元素处于活动状态
            if ($(this).parents('.menuTab').next('.menuTab').length) {

                var activeId = $(this).parents('.menuTab').next('.menuTab:eq(0)').data('id');
                $(this).parents('.menuTab').next('.menuTab:eq(0)').addClass('active');

                $('.mainContent .my_iframe').each(function() {
                    if ($(this).data('id') == activeId) {
                        $(this).show().siblings('.my_iframe').hide();
                        return false;
                    }
                });

                var marginLeftVal = parseInt($('.page-tabs-content').css('margin-left'));
                if (marginLeftVal < 0) {
                    $('.page-tabs-content').animate({
                        marginLeft: (marginLeftVal + currentWidth) + 'px'
                    },
                    "fast");
                }

                //  移除当前选项卡
                $(this).parents('.menuTab').remove();

                // 移除tab对应的内容区
                $('.mainContent .my_iframe').each(function() {
                    if ($(this).data('id') == closeTabId) {
                        $(this).remove();
                        return false;
                    }
                });
            }

            // 当前元素后面没有同辈元素，使当前元素的上一个元素处于活动状态
            if ($(this).parents('.menuTab').prev('.menuTab').length) {
                var activeId = $(this).parents('.menuTab').prev('.menuTab:last').data('id');
                $(this).parents('.menuTab').prev('.menuTab:last').addClass('active');
                $('.mainContent .my_iframe').each(function() {
                    if ($(this).data('id') == activeId) {
                        $(this).show().siblings('.my_iframe').hide();
                        return false;
                    }
                });

                //  移除当前选项卡
                $(this).parents('.menuTab').remove();

                // 移除tab对应的内容区
                $('.mainContent .my_iframe').each(function() {
                    if ($(this).data('id') == closeTabId) {
                        $(this).remove();
                        return false;
                    }
                });
            }
        }
        // 当前元素不处于活动状态
        else {
            //  移除当前选项卡
            $(this).parents('.menuTab').remove();

            // 移除相应tab对应的内容区
            $('.mainContent .my_iframe').each(function() {
                if ($(this).data('id') == closeTabId) {
                    $(this).remove();
                    return false;
                }
            });
            scrollToTab($('.menuTab.active'));
        }
        return false;
    }

    $('.menuTabs').on('click', '.menuTab i:not(.fa-home)', closeTab);

    //关闭其他选项卡
    function closeOtherTabs() {
        $('.page-tabs-content').children("[data-id]").not(":first").not(".active").each(function() {
            $('.my_iframe[data-id="' + $(this).data('id') + '"]').remove();
            $(this).remove();
        });
        $('.page-tabs-content').css("margin-left", "0");
    }
    $('.tabCloseOther').on('click', closeOtherTabs);

    //滚动到已激活的选项卡
    function showActiveTab() {
        scrollToTab($('.menuTab.active'));
    }
    $('.tabShowActive').on('click', showActiveTab);

    // 点击选项卡菜单
    function activeTab() {
        if (!$(this).hasClass('active')) {
            var currentId = $(this).data('id');
            // 显示tab对应的内容区
            $('.mainContent .my_iframe').each(function() {
                if ($(this).data('id') == currentId) {
                    $(this).show().siblings('.my_iframe').hide();
                    return false;
                }
            });
            $(this).addClass('active').siblings('.menuTab').removeClass('active');
            scrollToTab(this);
        }
    }

    // 点击选项卡菜单
    $('.menuTabs').on('click', '.menuTab', activeTab);

    //刷新iframe
    function refreshTab() {
    	var currentId = $('.page-tabs-content').find('.active').attr('data-id');
    	var target = $('.my_iframe[data-id="' + currentId + '"]');
        var url = target.attr('src');
        target.attr('src', url).ready();
    }
    
    // 全屏显示
    $('#fullScreen').on('click', function () {
    	$('#wrapper').fullScreen();
    });
    
    // 刷新按钮
    $('.tabReload').on('click', refreshTab);

    $('.menuTabs').on('dblclick', '.menuTab', refreshTab);

    // 左移按扭
    $('.tabLeft').on('click', scrollTabLeft);

    // 右移按扭
    $('.tabRight').on('click', scrollTabRight);
    
    // 关闭当前
    $('.tabCloseCurrent').on('click', function () {
        $('.page-tabs-content').find('.active i').trigger("click");
    });

    // 关闭全部
    $('.tabCloseAll').on('click', function() {
        $('.page-tabs-content').children("[data-id]").not(":first").each(function() {
            $('.my_iframe[data-id="' + $(this).data('id') + '"]').remove();
            $(this).remove();
        });
        $('.page-tabs-content').children("[data-id]:first").each(function() {
            $('.my_iframe[data-id="' + $(this).data('id') + '"]').show();
            $(this).addClass("active");
        });
        $('.page-tabs-content').css("margin-left", "0");
    });
    
});

// 选项卡右键菜单
var menu = new BootstrapMenu('.page-tabs-content a', {
	fetchElementData: function(item) {
		return item;
	},
	actionsGroups: [
		['close', 'refresh'],
		['closeOther', 'closeAll'],
		['closeRight', 'closeLeft']
	],
	actions: {
		close: {
			name: '关闭',
			iconClass: 'zmdi zmdi-close',
			onClick: function(item) {
				closeTab(item);
			}
		},
		closeOther: {
			name: '关闭其它',
			iconClass: 'zmdi zmdi-arrow-split',
			onClick: function(item) {					
				$('.page-tabs-content a').each(function() {
					var tab = $(this);
                    if ($(this).data('id') != item.data('id')) {
                        closeTab(tab);
                    }
                });
                scrollToTab($('.menuTab.active'));
			}
		},
		closeAll: {
			name: '关闭所有',
			iconClass: 'zmdi zmdi-swap',
			onClick: function() {
				$('.page-tabs-content a').each(function() {
					var tab = $(this);
                    closeTab(tab);
                });
                 scrollToTab($('.menuTab.active'));
			}
		},
		closeRight: {
			name: '关闭右侧所有',
			iconClass: 'zmdi zmdi-arrow-right',
			onClick: function(item) {									
				$($('.page-tabs-content a').toArray().reverse()).each(function() {
					var tab = $(this);
                    if ($(this).data('id') != item.data('id')) {
                        closeTab(tab);
                    }else{
                    	return false;
                    }
                });
                 scrollToTab($('.menuTab.active'));
			}
			
		},
		closeLeft: {
			name: '关闭左侧所有',
			iconClass: 'zmdi zmdi-arrow-left',
			onClick: function(item) {
				$('.page-tabs-content a').each(function() {
					var tab = $(this);
                    if ($(this).data('id') != item.data('id')) {
                        closeTab(tab);
                    }else{
                    	return false;
                    }
                });
                 scrollToTab($('.menuTab.active'));
			}
		}
	}
});
		
// 关闭选项卡菜单
function closeTab(tab) {
    var closeTabId = tab.data('id');
    var currentWidth = tab.width();
    if(closeTabId == 'home'){
    	return false;
    }
    // 当前元素处于活动状态
    if (tab.hasClass('active')) {
        // 当前元素后面有同辈元素，使后面的一个元素处于活动状态
        if (tab.next('.menuTab').length) {

            var activeId = tab.next('.menuTab:eq(0)').data('id');
            tab.next('.menuTab:eq(0)').addClass('active');

            $('.mainContent .my_iframe').each(function() {
                if ($(this).data('id') == activeId) {
                    $(this).show().siblings('.my_iframe').hide();
                    return false;
                }
            });

            var marginLeftVal = parseInt($('.page-tabs-content').css('margin-left'));
            if (marginLeftVal < 0) {
                $('.page-tabs-content').animate({
                    marginLeft: (marginLeftVal + currentWidth) + 'px'
                },
                "fast");
            }

            //  移除当前选项卡
            tab.remove();

            // 移除tab对应的内容区
            $('.mainContent .my_iframe').each(function() {
                if ($(this).data('id') == closeTabId) {
                    $(this).remove();
                    return false;
                }
            });
        }

        // 当前元素后面没有同辈元素，使当前元素的上一个元素处于活动状态
        if (tab.prev('.menuTab').length) {
            var activeId = tab.prev('.menuTab:last').data('id');
            tab.prev('.menuTab:last').addClass('active');
            $('.mainContent .my_iframe').each(function() {
                if ($(this).data('id') == activeId) {
                    $(this).show().siblings('.my_iframe').hide();
                    return false;
                }
            });

            //  移除当前选项卡
            tab.remove();

            // 移除tab对应的内容区
            $('.mainContent .my_iframe').each(function() {
                if ($(this).data('id') == closeTabId) {
                    $(this).remove();
                    return false;
                }
            });
        }
    }
    // 当前元素不处于活动状态
    else {
        //  移除当前选项卡
        tab.remove();

        // 移除相应tab对应的内容区
        $('.mainContent .my_iframe').each(function() {
            if ($(this).data('id') == closeTabId && $(this).data('id') != 'home') {
                $(this).remove();
                return false;
            }
        });
       // scrollToTab($('.menuTab.active'));
    }
    return false;
}

//计算元素集合的总宽度
function calSumWidth(elements) {
    var width = 0;
    $(elements).each(function() {
        width += $(this).outerWidth(true);
    });
    return width;
}

//滚动到指定选项卡
function scrollToTab(element) {
    var marginLeftVal = calSumWidth($(element).prevAll()),
    marginRightVal = calSumWidth($(element).nextAll());
    // 可视区域非tab宽度
    var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
    //可视区域tab宽度
    var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
    //实际滚动宽度
    var scrollVal = 0;
    if ($(".page-tabs-content").outerWidth() < visibleWidth) {
        scrollVal = 0;
    } else if (marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
        if ((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
            scrollVal = marginLeftVal;
            var tabElement = element;
            while ((scrollVal - $(tabElement).outerWidth()) > ($(".page-tabs-content").outerWidth() - visibleWidth)) {
                scrollVal -= $(tabElement).prev().outerWidth();
                tabElement = $(tabElement).prev();
            }
        }
    } else if (marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
        scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
    }
    $('.page-tabs-content').animate({
        marginLeft: 0 - scrollVal + 'px'
    },
    "fast");
}